
import React from 'react'
import { Table, Input, Button, message } from 'antd'
import { inject, observer } from 'mobx-react'
import { withRouter } from 'react-router-dom'
import Xiala from '../../../component/promotion/XiaLaXuanZe'

@withRouter
@inject('xingYunChouJiang')
@observer
class ChouJiang extends React.Component {

  chuShiHua = () => {
    let id = parseInt(this.props.location.search.split('=')[1])
    this.props.xingYunChouJiang.selXiangQing(id).then(data => {
      if (data !== 200 && data.code !== 200) {
        message.warning('出错了，请稍后再试')
      }
    })
  }



  componentWillMount() {
    this.chuShiHua()
  }



  zhongJiangUser = () => {
    this.props.xingYunChouJiang.getZhongJiang(parseInt(this.props.location.search.split('=')[1]))
    // this.props.history.push('/Home/cuXiao/Draw/LockDraw/WinningUsers')
  }

  neiDingChouJiang = () => {
    this.props.history.push('/Home/cuXiao/Draw/LockDraw/NeiDingChouJiang')
  }
  render() {

    let bianHao = (name) => {
      return (e) => this.props.xingYunChouJiang.insertStart(name, e)
    }

    let { xiangQingData,isZhongJiang } = this.props.xingYunChouJiang

    let Change = (id) => {
      return (e) => updateChange(id, e)
    }

    let pagination = {
      defaultPageSize: 4
    }

    let xiaLaId = 0

    let souSuo = () => {
      this.props.xingYunChouJiang.updateStutes(xiaLaId)
    }

    let updateChange = (name, id)=> {
      xiaLaId = id
      this.props.xingYunChouJiang.updateStutes(id)
    }
    let xiaLa = [
      { goodsId: 1, goodsName: '待付款' },
      { goodsId: 2, goodsName: '拼团中' },
      { goodsId: 3, goodsName: '拼团成功' },
      { goodsId: 4, goodsName: '拼团失败' },
      { goodsId: 5, goodsName: '拼团失败（待付款）' },
      { goodsId: 6, goodsName: '拼团失败（已退款）' },
    ]
    const columns = [

      {
        align: 'center',
        title: '团购编号',
        dataIndex: 'bulkOid',
        key: 'bulkId',
      },
      {
        align: 'center',

        title: '团长',
        dataIndex: 'bulkLider',
        key: 'bulkLider',
      },
      {
        align: 'center',

        title: '参团人数',
        dataIndex: 'groupPnum',
        key: 'groupPnum',
      },
      {
        align: 'center',

        title: '拼团时间',
        dataIndex: 'address',
        key: 'address',
      },
      {
        align: 'center',
        title: '拼团状态',
        dataIndex: 'bulkStatus',
        key: 'bulkStatus',
      },
      {
        title: '操作',
        align: 'center',
        dataIndex: 'bulkId',
        key: 'bulkId',
        render: (bulkId, row, key) => {
          return <Button type="primary">查看</Button>
        }
      }
    ];

    let temp
    if (isZhongJiang) {
      temp = <div>
          <Button type="primary" onClick={this.zhongJiangUser}>查看中奖用户</Button>
      </div>
    }else{
      <div>
          <Button type="primary" onClick={this.neiDingChouJiang}>内定抽奖</Button>
          <Button type="primary" onClick={this.neiDingChouJiang}>随机抽奖</Button>
      </div>
    }
    return (
      <div>
        <h1>抽奖详情</h1>
        <div style={{ display: 'flex', marginBottom: '20px' }}>
          <div className="xiangQinItem">
            <span style={{ width: '150px' }}>团购编号：</span>
            <Xiala xiaLaData={xiangQingData} Change={bianHao} />
          </div>
          <div className="xiangQinItem smill">
            <span style={{ width: '150px' }}> 团购状态：</span>
            <Xiala xiaLaData={xiaLa} Change={Change} />
          </div>
          <Button type="primary" onClick={souSuo}>搜索</Button>
          <div>
            {temp}
            
          </div>
        </div>
        <Table dataSource={xiangQingData} pagination={pagination} columns={columns} />
      </div>
    )
  }
}


export default ChouJiang